<template>
  <div class="editor-image-container" :style="containerStyle">
    <img 
      class="editor-image" 
      :src="props.src" 
      :style="imageStyle"
      alt="编辑器图片"
    />
    <div class="image-title" v-if="props.showTitle">{{ props.title }}</div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, computed } from 'vue';

const props = defineProps({
  src: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: 'auto'
  },
  borderRadius: {
    type: Number,
    default: 0
  },
  showTitle: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  aspectRatio: {
    type: String,
    default: '16/9'
  }
});

const containerStyle = computed(() => {
  return {
    width: props.width,
  };
});

const imageStyle = computed(() => {
  return {
    borderRadius: `${props.borderRadius}px`,
    aspectRatio: props.aspectRatio,
    height: props.height !== 'auto' ? props.height : undefined
  };
});

defineOptions({
  name: 'editor-image'
});
</script>

<style lang="scss" scoped>
.editor-image-container {
  position: relative;
  
  .editor-image {
    width: 100%;
    display: block;
    object-fit: cover;
  }
  
  .image-title {
    margin-top: 8px;
    font-size: 14px;
    color: #666;
    text-align: center;
  }
  
  &:hover {
    .editor-image {
      outline: 1px dashed #ccc;
    }
  }
}
</style> 